<!--推广列表展示页面-->
<template>
    <f7-page no-toolbar :page-content="false">
        <f7-navbar title="发起聚会" back-link="Back">
        </f7-navbar>

        <f7-toolbar tabbar top>
            <f7-link tab-link="#oneTab" tab-link-active>基本资料</f7-link>
            <f7-link tab-link="#twoTab">图文描述</f7-link>
        </f7-toolbar>

        <!--基本资料-->
        <f7-tabs swipeable>
            <f7-tab id="oneTab" tab-active class="page" >
                <f7-list form class="page-content" style="padding-top: 20%;">
                    <f7-list-input
                            label="主标题"
                            type="text"
                            placeholder="请输入"
                    />
                    <f7-list-input
                            label="副标题"
                            type="textarea"
                            placeholder="请输入"
                    />
                    <f7-list-input
                            label="聚会类型"
                            type="select"
                            defaultValue="旅游"
                    >
                        <option>自驾游</option>
                        <option>旅游</option>
                        <option>电影</option>
                    </f7-list-input>
                    <f7-list-input
                            label="当前手机号"
                            name="username"
                            placeholder="请输入手机号码"
                            type="text"
                    />
                    <f7-list-input
                            label="身高"
                            name="username"
                            placeholder="请输入手机号码"
                            type="text"
                    />
                    <f7-list-input
                            label="当前手机号"
                            name="username"
                            placeholder="请输入手机号码"
                            type="text"
                    />
                    <f7-list-input
                            label="身高"
                            name="username"
                            placeholder="请输入手机号码"
                            type="text"
                    />
                    //体重，职业，交友要求，城市
                    <f7-list-input
                            label="出生日期"
                            type="date"
                            placeholder="出生日期"
                            value="2019-04-30"
                    />
                    <f7-list-input
                            label="个人签名"
                            type="textarea"
                            placeholder="个人签名"
                    />
                </f7-list>

                <!--<f7-list style="text-align: center;width: 90%;margin-top: -24px;margin-left: 5%;">
                    <f7-button fill round text="保存"></f7-button>
                </f7-list>-->
                <f7-toolbar bottom>
                    <!--<f7-link style="width: 100%" href="/home/" target="_blank" text="完成，感谢您开启合群时代"></f7-link>-->
                    <f7-button style="color: white;width: 100%;margin: auto 5%;" class="col button button-fill button-round">保存</f7-button>
                </f7-toolbar>
            </f7-tab>


            <f7-tab id="twoTab"  class="page">
                <div class="rich-text-test" style="margin-top: 250px;">
                    <vue-html5-editor :content="content" :height="400" @change="updateData"></vue-html5-editor>
                </div>

                <f7-toolbar bottom>
                    <f7-button style="color: white;width: 100%;margin: auto 5%;" class="col button button-fill button-round">暂存</f7-button>
                    <f7-button style="color: white;width: 100%;margin: auto 5%;" class="col bg-color-green button button-fill button-round">马上提交申请</f7-button>
                </f7-toolbar>
            </f7-tab>

        </f7-tabs>


    </f7-page>
</template>

<script>
    import labelListEdit from '../../components/labelListEdit.vue';
    import VueHtml5Editor from 'vue-html5-editor'


    export default {
        components: {labelListEdit,VueHtml5Editor},
        data() {
            return {
                swiperParams: {
                    // speed: 500,
                    loop: true,
                    // height:600,
                    // autoplay: {
                    //   delay: 1500,
                    // },
                    direction:'vertical'
                    // preventLinksPropagation: false   // 阻止点击事件冒泡
                },
                content:"请输入图文描述"
            };
        },
        methods: {
            refresh(event, done) {
                setTimeout(() => {
                    // todo
                    done();
                }, 1000);
            },
            updateData(e = "") {
                let c1 = e.replace(/<img width="100%"/g, "<img");
                let c2 = c1.replace(/<img/g, '<img width="100%"');
                this.content = c2;
                console.log(this.content);

            }
        }
    }
</script>
